<template>
  <el-scrollbar style="height: 100%" >
    <div class="ns-tree-com tree-com" >
      <el-input class="filterinpput"
                placeholder="输入关键字进行目录筛选"
                v-model="filterText"
                size="medium">
      </el-input>
      <el-tree
        :indent="0"
        :data="datas"
        node-key="id"
        v-loading="loading"
        element-loading-text="目录加载中"
        :expand-on-click-node="false"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        ref="tree">
        <div class="custom-node" slot-scope="{node, data}">
          <div class="node-left">
            <span    style="margin-left: 7px;">{{data.parent.catalogName}}</span>
          </div>

        </div>
      </el-tree>

    </div>
  </el-scrollbar>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapState,mapGetters} = createNamespacedHelpers('dirmanage')
export default {
  name: 'DirCatalog',
  mounted() {
    this.$store.dispatch('dirmanage/getCatlogData')
    this.$store.dispatch('dirmanage/getCatlog')
    var requestParams={
      pageNumber:1,
      pageSize:15,
      code:'',
      name:'',
      catalogId:1
    }
    // var catalogIdDataList = [1,2,3,4]
    // if (this.link === '/theVector'){
    requestParams.name = window.sessionStorage.getItem('shiName')
    this.$store.commit('dirmanage/getCurrentCatalogId',requestParams.catalogId)
    this.$store.commit("dirmanage/resetVectorBreadCrumbs",['生态保护红线'])
    this.$store.dispatch('dirmanage/getAttributeInfo',requestParams)
    // }
    // else if (this.link ==='/theText'){
    //   this.$store.commit("dirmanage/resetTextBreadCrumbs",["生态保护红线"])
    //   this.$store.dispatch('dirmanage/getAttributeInfo',{catalogIds:catalogIdDataList,achievementsTypeId:'2'})
    // }
  },
  computed:{
    ...mapGetters(['datas']),
    ...mapState(['loading']),
    ...mapGetters(['catlogRootId']),
    ...mapGetters(['documentIdLists']),
    ...mapGetters(['link']),
    ...mapGetters(['catalogLists']),
  },
  data () {
    return {
      catalog:"",
      node:"",
      nodedata:"",
      childNode:"",
      childData:"",
      filterText: '',
      curNode: {},
      curText: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogForm2Visible: false,
      dialogForm3Visible: false,
      dialogForm4Visible: false,
      deleteNodes:[],
      deleteDatas:[],
      requestParams:{
        pageNumber:1,
        pageSize:15,
        code:'',
        name:'',
        catalogId:''
      },
      form: {
        oldName: '',
        newName: '',
        newRootName:"",
        newChildNode:""
      },
      formLabelWidth: '100px'
    }
  },
  props: {
    data: {
      type: Array,
      require: true
    }
  },
  model: {
    prop: 'data'
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    data (val) {
      this.$emit('input', val)
    },
  },
  methods: {
    // 模糊搜索
    filterNode(value, data) {
      if (!value) return true;
      return data.parent.catalogName.indexOf(value) !== -1;
    },
    // 添加根目录
    addRoot(){
      this.dialogForm2Visible = true
    },
    updateNewRootName(){
      this.dialogForm2Visible = false
      var  newRootData = {}
      var  level = 1
      var  upLevelId = 0
      var  catalogName = this.form.newRootName
      if (catalogName){
        newRootData={
          level:level,
          upLevelId:upLevelId,
          catalogName:catalogName
        }
        this.$store.commit('dirmanage/addDatalist',{'parent':newRootData})
        this.updateRootCatalog()
      }
      else {
        this.$message.error('文件夹名称不能为空!')
      }
    },
    updateRootCatalog(){
      this.$store.dispatch('dirmanage/addRootCatalog')
    },
    // 编辑目录名称
    editNode (node, data) {
      this.dialogFormVisible = true
      this.form.oldName = data.parent.catalogName
      this.node = node
      this.nodedata = data
      this.form.newName = ''
    },
    // 编辑目录名称完成后 进行更新
    update(){
      if (this.form.newName) {
        this.$store.commit('dirmanage/editCatlogName',{data:this.nodedata,newName:this.form.newName})
        this.updateCatalog()
      } else {
        this.$message.error('文件夹名称不能为空！！')
      }
    },
    // 更新数据库
    updateCatalog(){
      this.$store.dispatch('dirmanage/updateCatlog')
    },
    updateDir(){
      console.log(this.datas)
    },
    addChild (node, data) {
      this.dialogForm3Visible = true
      this.childNode = node
      this.childData = data
      this.form.newChildNode = ''
    },
    updateChildNode() {
      this.dialogForm3Visible = false
      console.log(this.childNode,this.childData)
      var level = this.childData.parent.level + 1
      var upLevelId = this.childData.parent.id
      var catalogName = this.form.newChildNode
      if (catalogName){
        var childNode = {
          level:level,
          upLevelId:upLevelId,
          catalogName:catalogName
        }
        this.$store.commit('dirmanage/addChildData',{'parent':childNode})
        this.updateTree()
      }
      else {
        this.$message.error('文件夹名称不能为空!')
      }
    },
    updateTree(){
      this.$store.dispatch('dirmanage/addRootCatalog')
    },
    deleteNode ( node,data) {
      this.dialogForm4Visible = true
      this.deleteNodes = node
      this.deleteDatas = data
      console.log(data)
      this.catalog = data.parent.catalogName
    },
    deleteNodeFinal (){
      var id = this.deleteDatas.parent.id
      this.$store.dispatch('dirmanage/deleteCatlog',id)
      this.dialogForm4Visible = false
    },
    handleNodeClick(data) {
      console.log(data.parent.id)
      var doucumentIdList = []
      var catalogIdList = []
      const CurrentCode = data.parent.code
      var codeList = []
      for(var j = 0;j<CurrentCode.length;j++){
        codeList.push(CurrentCode.substr(0,j+1))
      }

      // console.log(this.catalogLists)
      for (var i = 0;i<codeList.length;i++){
        for (var n =0;n<this.catalogLists.length;n++){
          if (this.catalogLists[n].code === codeList[i]){
            doucumentIdList.push(this.catalogLists[n].catalogName)
          }
        }
      }
      this.$store.commit("dirmanage/resetVectorBreadCrumbs",doucumentIdList)
      this.requestParams.catalogId = data.parent.id
      if (data.parent.id>20 && data.parent.id<25){
        this.$store.commit('dirmanage/changeTable',false)
      }
      else{
        this.$store.commit('dirmanage/changeTable',true)
      }
      this.$store.commit('dirmanage/getCurrentCatalogId',data.parent.id)
      this.$store.commit('dirmanage/getCurrentPageNumber',1)
      this.requestParams.name = window.sessionStorage.getItem('shiName')
      this.$store.dispatch('dirmanage/getAttributeInfo',this.requestParams)
    }

  }


}
</script>
<style scoped lang="scss">
  ::v-deep.el-scrollbar .el-scrollbar__wrap {overflow-x: hidden;}
  .catalogName{
    color: red;
  }
  ::v-deep.el-button+.el-button{
    margin-left: 5px;
  }
  .node-left{
    width: 100px;
  }
  .el-form{

  }
  ::v-deep.el-dialog__header{
    padding: 10px;
  }
  ::v-deep .el-dialog__title{
    font-size: 16px;
  }
  ::v-deep.el-form-item{
    margin-bottom: 10px;
  }
  ::v-deep.mye_input{
    width: 100%;
  }
  ::v-deep .el-dialog{
    position:absolute;
    left:26%;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-sizing: border-box;
    width: 300px;
  }
  ::v-deep .el-dialog__body{
    padding: 15px;
  }
  .filterinpput{

  }
  .addRootDir{
    color: #100f0f;
    margin-top: 10px;
  }

  ::v-deep.el-dialog__headerbtn{
    top:15px
  }
  ::v-deep.el-tree-node__content .el-tree-node__expand-icon{
    padding: 0;

  }
  ::v-deep .el-tree-node__content{
    height: 21px;
  }
  ::v-deep .ns-tree-com.tree-com{
    padding:8px;
    $icon-width: 18px;
    $line-color: #969696;
    overflow: hidden;

    @mixin lineTopLeft {

    }
    .el-tree{
      padding-top: 20px;
      padding-left: 20px;
      &>.el-tree-node{
        &:before{border-left: none !important;}
      }
      .el-tree-node{
        position: relative;
        padding: 2px;
        &:last-child:before {
          /*height: 20px;*/
        }
        &:before{
          @include lineTopLeft;

          bottom: 0;
          height: 100%;
          top: -26px;
          width: 1px;
        }
        &:after{
          @include lineTopLeft;

          height: 20px;
          top: 12px;
          width: 24px;
        }
        .el-tree-node__content{
          padding: 3px;

        }
        .el-tree-node__content:hover{
          .node-right{
            display: block;
          }
        }
      }
      .el-tree-node__children{
        padding-left: 12px;
      }
    }
    .el-tree-node__expand-icon{
      width: $icon-width;
      height: $icon-width;
      padding: 0;
      &.is-leaf{
        &.el-icon-caret-right{
          background-image: url("../../assets/img/dir.png");
        }
      }
      &.expanded{
        transform: rotate(0deg);
        &.el-icon-caret-right{
          background-image: url("../../assets/img/expand.png");
        }
      }
      &.el-icon-caret-right{
        &::before{content: '';}
        background-image: url("../../assets/img/close2.png");
        background-size: 18px;
      }
    }
    .custom-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      .node-right{
        display: none;
      }
    }
  }
  /*/deep/ .el-table__body-wrapper::-webkit-scrollbar {*/
  /*  width:6px;!* 滚动条的宽高 必须项 *!*/
  /*  height: 5px;*/
  /*}*/

  /*/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {*/
  /*  background-color: #bfcbd9;!* 滚动条的宽 *!*/
  /*  border-radius: 3px;*/
  /*}*/
  ::v-deep .el-input__inner{
    margin-left: 15%;
    width: 70%;
    border-radius: 45px;
  }

</style>
